---
import type { EnhancedContributor } from '../../util/getContributors';
type HeadingLevels = "1" | "2" | "3" | "4" | "5" | "6";

export interface Props {
  contributor: EnhancedContributor;
  count: string;
  type: "pulls" | "issues" | "reviews";
  hLevel: HeadingLevels;
}

const { contributor, count, hLevel, type } = Astro.props;
const H: `h${HeadingLevels}` = `h${hLevel}`;
const { issues, reviews, merged_pulls } = contributor;
const allCounts = [issues, reviews, merged_pulls].flatMap(type => Object.values(type));
const maxCount = Math.max(...allCounts);
const stat = contributor[type === "pulls" ? "merged_pulls" : type];
const repoCounts = Object.entries(stat).sort(([, a], [, b]) => b - a);

const subPath = type === 'issues' ? 'issues' : 'pulls'
const isType = `is:${type === 'issues' ? 'issue' : 'pr'}`
const userFilter = `${type === 'reviews' ? 'reviewed-by' : 'author'}:${contributor.username}`
const query = `${subPath}?q=${isType}+${userFilter}`
---

<li class="text-center p-6 bg-neutral-700 border border-neutral-600 flex flex-col gap-6">
  <div class="flex flex-col gap-2">
    <H class="heading-5 text-white">{type[0]!.toUpperCase() + type.slice(1)}</H>
    <p class="text-[2rem] text-white font-obviously-wide font-semibold leading-none">{count}</p>
  </div>
  <ul class="text-[13px] leading-tight">
    {
      repoCounts.map(([repo, repoCount]) => {
        const percentage = (repoCount / maxCount) * 100;
        return (
          <li class="grid grid-cols-2 items-center">
            <a
              href={`https://github.com/PaddlePaddle/${repo}/${query}`}
              class="text-right py-0.5 pr-2 border-r border-neutral-500 break-words link"
            >
              {repo}
            </a>
            <span
              class="pl-2"
            >
              <span
                class="block w-[var(--bar-w)] min-w-[2px] bg-blue-purple-gradient h-2 rounded-full"
                style={`--bar-w: ${percentage}%;`}
              >
                <span class="sr-only">{repoCount} {type}</span>
              </span>
            </span>
          </li>
        );
      })
    }
  </ul>
</li>
